export function drawShower () {
  // canvas主画布
  let canvas = document.getElementById('showerCanvas')
  let context = canvas.getContext('2d')
  let node = document.getElementById('main') || document.getElementsByClassName('showerBack')[0]
  canvas.width = node.clientWidth
  canvas.height = node.clientHeight
  // 主画布长宽高
  let canvasValue = {
    width: canvas.width,
    height: canvas.height,
    hypotenuse: Math.sqrt(canvas.width * canvas.width + canvas.height * canvas.height)
  }
  const starCount = 100
  const rainCount = 10
  const rainColor = ['Cyan', 'DeepPink', 'GreenYellow']

  let Star = function () {
    this.x = canvasValue.width * Math.random()
    this.y = canvasValue.height * Math.random()
    this.r = Math.random() / 2 + 1.2
    this.color = 'cyan'
    this.draw = function () {
      context.beginPath()
      context.arc(this.x, this.y, this.r, 0, Math.PI * 2)
      let fillStyle = context.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r)
      let random = Math.random()
      if (random > 0.9) {
        fillStyle.addColorStop(0.1, '#FFF')
        fillStyle.addColorStop(0.2, 'gray')
        fillStyle.addColorStop(0.4, '#333')
        fillStyle.addColorStop(1, '#3330')
      } else {
        fillStyle.addColorStop(0.1, '#FFF')
        fillStyle.addColorStop(0.2, 'cyan')
        fillStyle.addColorStop(0.4, '#214988')
        fillStyle.addColorStop(1, 'rgba(33, 73, 136, 0%)')
      }
      context.fillStyle = fillStyle
      context.fill()
    }
  }

  let MeteorRain = function () {
    this.x = canvasValue.width * (Math.random() * 0.75 + 0.25)
    this.y = canvasValue.height * (Math.random() * 0.5)
    this.alpha = 1
    this.width = -1
    this.height = -1
    this.length = -1
    this.angle = (Math.random() * 10) + 25
    this.speed = -1
    this.offsetX = -1
    this.offsetY = -1

    this.init = function () {
      let l = Math.random() * 50 + 150
      this.length = Math.ceil(l)
      let s = Math.random() + 0.5
      this.speed = Math.ceil(s) * 2
      let cos = Math.cos(this.angle * 3.14 / 180)
      let sin = Math.sin(this.angle * 3.14 / 180)
      this.width = this.length * cos
      this.height = this.length * sin
      this.offsetX = this.speed * cos
      this.offsetY = this.speed * sin
      this.getColor()
    }
    this.draw = function () {
      context.save()
      context.beginPath()
      context.lineWidth = 1
      context.globalAlpha = this.alpha
      let line = context.createLinearGradient(this.x, this.y, this.x + this.width, this.y - this.height)
      line.addColorStop(0, 'white')
      line.addColorStop(0.3, this.color)
      line.addColorStop(0.6, 'black')
      context.strokeStyle = line
      context.moveTo(this.x, this.y)
      context.lineTo(this.x + this.width, this.y - this.height)
      context.closePath()
      context.stroke()
      context.restore()
    }
    this.move = function () {
      let x = this.x + this.width - this.offsetX
      let y = this.y - this.height
      context.clearRect(x - 3, y - 3, this.offsetX + 5, this.offsetY + 5)
      this.x = this.x - this.offsetX
      this.y = this.y + this.offsetY
      this.alpha -= 0.002
      this.draw()
    }
    this.getColor = function () {
      const random = Math.random()
      const length = rainColor.length
      const step = 1 / length
      for (let i = 1; i <= length; i++) {
        if (random < step * i) {
          this.color = rainColor[i - 1]
          break
        }
      }
    }
  }

  let starArr = []
  let rainArr = []

  function init () {
    for (let i = 0; i < rainCount; i++) {
      let rain = new MeteorRain()
      rain.init()
      rain.draw()
      rainArr.push(rain)
    }
    for (let i = 0; i < starCount; i++) {
      let star = new Star()
      star.draw()
      starArr.push(star)
    }
    playRains()
  }

  // 绘制流星
  function playRains () {
    for (let i = 0; i < rainCount; i++) {
      let rain = rainArr[i]
      rain.move()
      if (rain.y > window.innerHeight) {
        context.clearRect(rain.x, rain.y - rain.height, rain.width, rain.height)
        rainArr[i] = new MeteorRain()
        rainArr[i].init()
      }
    }
    for (let i = 0; i < rainCount; i++) {
      starArr[i].draw()
    }
    window.requestAnimationFrame(playRains)
  }

  init()
}
